<template>
  <el-dialog v-bind="config__" :top="top" :width="width" :before-close="cancel">
    <!-- 顶部插槽 -->
    <slot name="calendar-month-action"></slot>

    <!-- 日期面板 -->
    <date-panel :date.sync="data__.date"></date-panel>

    <!-- 日期类型日历 -->
    <date-site ref="date-site" :date="data__.date">
      <template v-slot:default="slotProps">
        <slot name="calendar-month-item" v-bind="slotProps" :currentDate="data__.date"></slot>
      </template>
    </date-site>
  </el-dialog>
</template>

<script>
import { getDayInMonthList } from './utils'
import DateSite from './DateSite'
import DatePanel from './DatePanel'

export default {
  name: 'CalendarBase',
  components: { DateSite, DatePanel },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '50%'
    },
    top: {
      type: String,
      default: '8vh !important'
    }
  },
  data() {
    return {
      config__: {
        visible: false,
        title: '日历管理',
        lockScroll: true,
        destroyOnClose: true,
        closeOnClickModal: false,
        customClass: 'el-calendar'
      },
      data__: {
        date: this.$dayjs().format('YYYY-MM-DD')
      }
    }
  },
  watch: {
    "data__.date": {
      handler (val) {
        this.$emit('date-panel-change', val)
      }
    }
  },
  methods: {
    open () {
      this.config__.visible = true
    },
    cancel () {
      this.config__.visible = false
      this.$emit('cancel')
      Object.assign(this.$data, this.$options.data.call(this))
    },
    getDayList () {
      return getDayInMonthList(this.$dayjs(this.data__.date).format('YYYY-MM'))
    },
    getCurrentDate () {
      return this.data__.date
    }
  }
}
</script>

<style>
  .el-calendar .el-dialog__body{
    padding-top: 0;
  }
</style>
